<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
			:scroll-into-view="scrollInto">
			<view class="pagecontrol-top-title">
				<view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text"
					@click="changeTab(index)" :id="'tab' + index">
					<view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">
						{{ items }}
					</view>
					<view class="pagecontrol-bottom-line"
						:class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'">
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<!--基本资料-->
					<view style="padding-bottom: 100px;">
						<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
							<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="75px">
								<uni-forms-item label="客户名称" name="customerName" required>
									<uni-easyinput type="text" v-model="formData.customerName" placeholder="请输入客户名称" />
								</uni-forms-item>
								<uni-forms-item label="客户类型" name="customerEntType" required>
									<uni-data-select v-model="formData.customerEntType" :localdata="customerEntType"
										style="background-color: white;" />
								</uni-forms-item>
								<uni-forms-item label="客户性质" name="customerEntNature" required>
									<uni-data-select v-model="formData.customerEntNature" :localdata="customerEntNature"
										style="background-color: white;" />
								</uni-forms-item>
								<uni-forms-item label="所属行业" name="customerIndustry" required>
									<uni-data-select v-model="formData.customerIndustry" :localdata="customerIndustry"
										style="background-color: white;" />
								</uni-forms-item>
								<uni-forms-item label="企业信用代码" name="customerCode">
									<uni-easyinput type="text" v-model="formData.customerCode" placeholder="请输入企业信用代码" />
								</uni-forms-item>
								<uni-forms-item label="办公电话" name="customerTel">
									<uni-easyinput type="text" v-model="formData.customerTel" placeholder="请输入办公电话" />
								</uni-forms-item>
								<uni-forms-item label="邮政编码" name="postcode">
									<uni-easyinput type="text" v-model="formData.postcode" placeholder="请输入邮政编码" />
								</uni-forms-item>
								<uni-forms-item label="经营地址" name="customerDistrict" required>
									<uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :localdata="customerDistrict"
										style="background-color: white;" v-model="formData.customerDistrict">
									</uni-data-picker>
									<view style="margin-top: 20px;">
										<uni-easyinput  type="text"
											v-model="formData.customerAddress" placeholder="请输入详细地址" />
									</view>
								</uni-forms-item>
								<uni-forms-item label="联系人" name="leader" required>
									<uni-easyinput type="text" v-model="formData.leader" placeholder="请输入联系人" />
								</uni-forms-item>
								<uni-forms-item label="职务" name="customerPost">
									<uni-easyinput type="text" v-model="formData.customerPost" placeholder="请输入职务" />
								</uni-forms-item>
								<uni-forms-item label="联系电话" name="phone" required>
									<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入联系电话" />
								</uni-forms-item>
								<uni-forms-item label="电子邮箱" name="email">
									<uni-easyinput type="text" v-model="formData.email" placeholder="请输入电子邮箱" />
								</uni-forms-item>
								<uni-forms-item label="相关附件" name="file">
									<myfilepicker :limit="'3'" :fileIdString="formData.otherInfo" :fileExtname="'pdf,png,gif,jpg,jpeg,doc,docx'" :fileMediatype="'all'"  @transFileIdString="getFileIdString"
										:title="'*点击可上传客户资料，支持pdf/doc/docx/jpg/jpeg/png/gif，最多可上传3个附件*'"></myfilepicker>
								</uni-forms-item>
								<uni-forms-item label="备注" name="remark">
									<uni-easyinput type="textarea" v-model="formData.remark" placeholder="客户相关备注说明" />
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</scroll-view>
				<view
					style="background-color: #ffffff;z-index: 3;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
					<view
						style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
						<view v-if="customerId==''" @click="submit()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							确定新增</view>
						<view v-else @click="submit_update()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							保存</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<!--收发货地址-->
					<view  style="padding-bottom: 100px;">
						<view>
							<view v-for="(item, index) in whatAddress" :key="item.id" style="display: flex;flex-direction: column;background-color: white;padding: 15px;border-bottom: 1rpx solid #ededed;" >
								<view>
									<text>{{item.contactName}}</text>
									<text style="margin-left: 20px;">{{item.phone?item.phone.slice(0,3)+'****'+item.phone.slice(-4):''}}</text>
								</view>
								<view>
									<text>{{item.bookDistrictName}}{{item.bookAddress}}</text>
								</view>
								<view style="display: flex;width: 100%;justify-content: end;">
									<view @click="editAddress(index)" hover-class="buttonHover" style="width: 40px;text-align: center;top:0;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 14px;">编辑</view>
								    <view @click="deleteAddress(index)" hover-class="buttonHover" style="width: 40px;text-align: center;top:0;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 14px;margin-left: 20px;">删除</view>
								</view>
							</view>
							<view @click="addAddress" hover-class="buttonHover" style="position: fixed;right: 15px;bottom:100px;width: 50px;height:50px;color:#ffffff;background-color:#bf5f09;border-radius: 50%;display:flex;justify-content: center;align-items: center;box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);">
								<uni-icons type="plusempty" size="30" color="#ffffff"></uni-icons>
							</view>
							<!-- <view @click="addAddress_ok" hover-class="buttonHover" style="position: fixed;left: 70%;transform:translateX(-50%);bottom:10px;width: 80px;height:30px;color:#bf5f09;background-color:#ffffff;border:1px solid #bf5f09;border-radius: 4px;display:flex;justify-content: center;align-items: center;">
								确定新增
							</view> -->
						</view>
					</view>
				</scroll-view>
				<view
					style="background-color: #ffffff;z-index: 3;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
					<view
						style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
						<view v-if="customerId==''" @click="submit()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							确定新增</view>
						<view v-else @click="submit_update()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							保存</view>
					</view>
				</view>
			</swiper-item>
			
		</swiper>
	</div>
</template>

<script>
	import {getCustomerDetails,addCustomer,updateCustomerProfile} from '@/api/system/customer.js'
	import {getDicts,getAllAddressTree} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				itemsArr: ['基本资料', '收发货地址'],
				tabIndex: 0,
				scrollH: 700,
				scrollInto: '',
				formData: {
					bookList:[],
					customerName: '',
					customerEntType: '',
					customerEntNature: '',
					customerIndustry: '',
					customerCode:'',
					customerTel: '',
					postcode: '',
					customerDistrict: '',
					customerAddress: '',
					leader: '',
					customerPost: '',
					phone: '',
					email: '',
					otherInfo:'',
					remark: '',
				},
				// 校验规则
				rules: {
					customerName: {
						rules: [{
								required: true,
								errorMessage: '请输入客户名称',
							}
						]
					},
					customerEntType: {
						rules: [{
							required: true,
							errorMessage: '请选择客户类型',
						}]
					},
					customerEntNature: {
						rules: [{
							required: true,
							errorMessage: '请选择客户性质',
						}]
					},
					customerIndustry: {
						rules: [{
							required: true,
							errorMessage: '请选择所属行业',
						}]
					},
					customerDistrict: {
						rules: [{
							required: true,
							errorMessage: '请选择经营地址',
						}]
					},
					leader: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					},
				},
				//全国地区下拉框
				customerDistrict: [],
				//下拉框 ->客户类型
				customerEntType: [],
				//下拉框 ->客户性质
				customerEntNature: [],
				//下拉框 ->所属行业
				customerIndustry: [],

				// 地址源
				whatAddress: [],
				customerId:'',
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - 40;
				}
			});
			//根据客户id查询客户详情
			if(e.customerId)
			{
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title: '编辑客户'
				})
				this.customerId=e.customerId
				
				uni.showLoading({
					title: '正在加载',
				})
				//获取客户详情
				getCustomerDetails(e.customerId).then(res => {
					uni.hideLoading()
					if(res.code=='200')
					{
						this.formData=res.data
						this.formData.customerDistrict=this.formData.customerDistrict.toString()
						this.whatAddress=res.data.bookList||[]
					}
					else
					{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		},
		created() {
			//获取客户类型
			getDicts('customer_type').then(res=>{
				this.customerEntType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})	
			})
			//获取客户性质
			getDicts('customer_nature').then(res=>{
				this.customerEntNature=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			//获取所属行业
			getDicts('industry_type').then(res=>{
				this.customerIndustry=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			
			//获取全国地址信息
			getAllAddressTree().then(res=>{
				this.customerDistrict=res.data
			})
			
		},
		methods: {
			//接收文件传递的id字符串集合
			getFileIdString(fileIds){
				this.formData.otherInfo=fileIds
			},
			//接受保存地址后的数据
			otherFun(bookList,index) {
				if(bookList){
					if(index)//编辑
					{
						this.whatAddress.splice(index,1,bookList)
					}
					else   //新增
					{
						this.whatAddress.push(bookList)
					}
					
				}else{
					return
				}
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				// 滚动到指定元素
				this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title: '正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
				this.changeTab(e.detail.current);
			},
			//提交新增客户
			submit(){
				let that=this
				this.$refs.form.validate().then(res=>{
					// if(that.whatAddress.length==0)
					// {
					// 	uni.showToast({
					// 		title: '请完善收发货地址',
					// 		icon:'none'
					// 	})
					// 	return
					// }
					this.formData.bookList=this.whatAddress
					uni.showLoading({
						title: '正在提交...',
					})
					
					addCustomer(that.formData).then(res => {
						uni.hideLoading()
						if(res.code=='200')
						{
							uni.showToast({
								title: '提交成功',
								icon:'none'
							})
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.otherFun('0')// 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
							uni.navigateBack({
							    delta:1 // 可以不傳delta值，默認為1
							})
						}
						else
						{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}).catch(err =>{
					uni.showToast({
						title: err[0].errorMessage,
						icon:'none'
					})
				})
			},
			//修改客户
			submit_update(){
				let that=this
				this.$refs.form.validate().then(res=>{
					// if(that.whatAddress.length==0)
					// {
					// 	uni.showToast({
					// 		title: '请完善收发货地址',
					// 		icon:'none'
					// 	})
					// 	return
					// }
					this.formData.bookList=this.whatAddress
					uni.showLoading({
						title: '正在修改...',
					})
					that.formData.customerId=that.customerId
					updateCustomerProfile(that.formData).then(res => {
						uni.hideLoading()
						if(res.code=='200')
						{
							uni.showToast({
								title: '修改成功',
								icon:'none'
							})
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.otherFun('0')// 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
							setTimeout(()=>{
								uni.navigateBack({
								    delta:1 // 可以不傳delta值，默認為1
								})
							},1000)
						}
						else
						{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}).catch(err =>{
					uni.showToast({
						title: err[0].errorMessage,
						icon:'none'
					})
				})
			},
			//编辑地址
			editAddress(index){
				uni.navigateTo({
					url:'/pages-user/user/addCustomer/addAddress?addressDetails='+JSON.stringify(this.whatAddress[index])+'&index='+index
				})
			},
			//删除地址
			deleteAddress(index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除此地址？',
					success: function (res) {
						if (res.confirm) {
							that.whatAddress.splice(index,1)
						}
					}
				});
			},
			//新增地址
			addAddress(){
				uni.navigateTo({
					url:'/pages-user/user/addCustomer/addAddress'
				})
			},
		},
	}
</script>

<style scoped>
	.pagecontrol-top-scroll {
		height: 40px;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		border-bottom: 1rpx solid #ededed;
		background-color: #f8f8f8;
	}

	.pagecontrol-top-title {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.pagecontrol-top-text {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.pagecontrol-top-normal {
		color: #656565;
		font-size: 16px;
	}

	.pagecontrol-top-selected {
		color: #000000;
		font-weight: bold;
		font-size: 16px;
	}

	.pagecontrol-bottom-line {
		width: 50vw;
		height: 3px;
		margin-top: 8px;
		background-color: #bf5f09;
		border-radius: 11px;
	}

	.pagecontrol-bottom-line-show {
		visibility: visible;
	}

	.pagecontrol-bottom-line-visibility {
		visibility: hidden;
	}

	.buttonHover {
		opacity: 0.6;
	}
	::v-deep .file-title{
	    font-size: 12px;
	    color: #333;
	}
</style>